<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>课后任务 - 修改资料（表格）</title>
  <style>
    body { font-family: "Microsoft YaHei", Arial, sans-serif; background:#efefef; padding:24px; }
    .container { width:760px; margin:0 auto; }
    h1 { font-size:20px; margin:0 0 6px 0; }
    p.note { color:#666; margin:6px 0 12px 0; }

    /* outer panel to mimic boxed area in screenshot */
    .panel { background:#fff; border:1px solid #bfbfbf; padding:18px; box-shadow:0 0 0 3px rgba(0,0,0,0.03) inset; }

    table.info { width:100%; border-collapse:collapse; }
    table.info tr { height:38px; }
    table.info td { padding:6px 10px; vertical-align:middle; }
    table.info td.label { width:140px; text-align:right; padding-right:14px; color:#333; font-size:14px; }
    /* separator line under each row */
    table.info td.inputcell { border-bottom:1px solid #e0e0e0; }

    table.info input[type="text"],
    table.info select,
    table.info textarea { width:360px; padding:6px 8px; border:1px solid #cfcfcf; border-radius:2px; font-size:13px; }
    table.info textarea { height:100px; resize:vertical; }
    .small { width:120px; }
    .inline-select { width:120px; margin-right:8px; }
    .note-right { color:#999; margin-left:8px; font-size:12px; }
    .required { color:#d00; margin-left:4px; }
    .btn { margin-top:12px; }
    .hint { font-size:12px; color:#666; text-align:center; margin-top:8px; }

    /* disabled email look */
    input[disabled] { background:#f5f5f5; color:#666; }

    /* buttons */
    button { padding:6px 12px; font-size:13px; border:1px solid #999; background:#f6f6f6; cursor:pointer; }
  </style>
</head>
<body>
  <div class="container">
    <div class="panel">
      <h1>修改资料</h1>
      <p class="note">以下信息将显示在你的个人资料页，方便大家了解你。<span class="required">*</span>为必填项</p>

      <form>
        <table class="info">
          <tr>
            <td class="label">* 昵称：</td>
            <td class="inputcell"><input type="text" name="nickname" value="" /></td>
          </tr>
          <tr>
            <td class="label">真实姓名：</td>
            <td class="inputcell"><input type="text" name="realname" value="" /></td>
          </tr>
          <tr>
            <td class="label">* 所在地：</td>
            <td class="inputcell">
              <select name="province" class="inline-select">
                <option>北京市</option>
                <option>上海市</option>
                <option>广东省</option>
              </select>
              <select name="city" class="inline-select">
                <option>海淀区</option>
                <option>朝阳区</option>
                <option>浦东新区</option>
              </select>
            </td>
          </tr>
          <tr>
            <td class="label">* 性别：</td>
            <td class="inputcell">
              <label><input type="radio" name="sex" value="男" checked /> 男</label>
              <label style="margin-left:12px;"><input type="radio" name="sex" value="女" /> 女</label>
              <label style="margin-left:12px;"><input type="radio" name="sex" value="保密" /> 保密</label>
            </td>
          </tr>
          <tr>
            <td class="label">生日：</td>
            <td class="inputcell">
              <select name="birth-year" class="inline-select">
                <option>年</option>
                <option>1990</option>
                <option>1991</option>
              </select>
              <select name="birth-month" class="inline-select">
                <option>月</option>
                <option>1</option>
                <option>2</option>
              </select>
              <select name="birth-day" class="inline-select">
                <option>日</option>
                <option>1</option>
                <option>2</option>
              </select>
            </td>
          </tr>
          <tr>
            <td class="label">博客地址：</td>
            <td class="inputcell"><input type="text" name="blog" placeholder="http://" /></td>
          </tr>
          <tr>
            <td class="label">常用邮箱：</td>
            <td class="inputcell">
              <input type="text" name="email" value="student@163.com" disabled />
              <span class="note-right">不可修改</span>
            </td>
          </tr>
          <tr>
            <td class="label">QQ：</td>
            <td class="inputcell"><input type="text" name="qq" class="small" /></td>
          </tr>
          <tr>
            <td class="label">MSN：</td>
            <td class="inputcell"><input type="text" name="msn" class="small" /></td>
          </tr>
          <tr>
            <td class="label">一句话介绍：</td>
            <td class="inputcell"><textarea name="intro"></textarea></td>
          </tr>
          <tr>
            <td class="label">证件类型：</td>
            <td class="inputcell">
              <select name="id-type" class="small">
                <option>身份证</option>
                <option>护照</option>
                <option>其它</option>
              </select>
            </td>
          </tr>
        </table>

        <div class="btn">
          <button type="submit">提交</button>
          <button type="reset" style="margin-left:8px;">重置</button>
        </div>

        <p class="hint">以下信息，可作为通过客服找回账号的依据</p>
      </form>
    </div>
  </div>
</body>
</html>
